import React from 'react';
import TodoList from './TodoList';
import TodoForm from './TodoForm';

class TodoBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todoList: [{ name: 'hello' }, { name: 'bust' }],
    };
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onFormSubmit(name) {
    const newList = { name };
    this.state.todoList.push(newList);
    const todoList = this.state.todoList;
    this.setState({ todoList });
  }

  render() {
    return (
      <div className="TodoBox">
        <TodoList list={this.state.todoList} />
        <TodoForm onFormSubmit={this.onFormSubmit} />
      </div>
    );
  }
}

export default TodoBox;
